<template>
	<view class="Checkout bigestBox boxSize_bb">
		<view class="AddShippingAddress" data-url="/pages/EditShippingAddressPage/EditShippingAddressPage" @tap="navTo">
			添加收货地址
		</view>
		<view class="flexDeCo bigBox boxSize_bb">
			<view class="item one flex boxSize_bb" style="margin-top: 0;">
				<image src="/static/images/NangCahng/repalceDaziImg.png" mode="" class="goodImg"></image>
				<view class="one_detail flexDeCo boxSize_bb">
					<view class="od_one flex_jcsb">
						<view class="odo_left">酒店鹅绒枕芯</view>
						<view class="odo_right">￥3000</view>
					</view>
					<view class="od_two flex_jcsb">
						<view class="odt_left">220x240 cm</view>
						<view class="odt_right">X2</view>
					</view>
				</view>
			</view>
			<view class="item two flexDeCo boxSize_bb">
				<view class="tItem t_one flex">订单总计</view>
				<view class="tItem t_two flex_jcsb">
					<view class="tt_left blackCommon">2件商品</view>
					<view class="tt_right yellowCommon">￥6000.00</view>
				</view>
				<view class="tItem t_three flex_jcsb">
					<view class="tt_left blackCommon">运费</view>
					<view class="tt_right yellowCommon">￥140.00</view>
				</view>
				<view class="tItem t_four flex_jcsb">
					<view class="tf_left blackCommon">运费折扣</view>
					<view class="tf_right yellowCommon">-￥140.00</view>
				</view>
				<view class="tItem flex t_five">合计：<text>￥</text><text>6000.00</text></view>
			</view>
			<view class="item three boxSize_bb">
				<view class="OrderRemarks">
					订单备注
				</view>
				<up-textarea v-model="oderRemarks" placeholder="请填写备注信息"></up-textarea>
			</view>
			<view class="item four flex_jcsb">
				<view class="four_left flexDeCo">
					<view class="fl_top">发票信息</view>
					<view class="fl_bottom">不需要发票</view>
				</view>
				<view class="uni-list-cell uni-list-cell-pd">
					<switch checked @change="switchChange" />
				</view>
				<!-- <image src="/static/images/Checkout/ON.png" mode="" class="switch"></image> -->
			</view>
			<view class="item five">点击下方的“付款”按钮，即代表我已确认此页面显示的信息准确无误。我已阅读并同意订单须知和隐私政策。</view>
			<view class="item totalPrice flex_jcsb boxSize_bb">
				<view class="tp_left">合计：￥60000.00</view>
				<view class="tp_right" @tap="pay">
					付款
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		navigateTo,
		showToast,
		navigateBack
	} from '@/utils/promise';
	export default {
		data() {
			return {
				oderRemarks: ""


			};
		},
		methods: {
			navTo(e) {
				navigateTo({
					url: "/pages/EditShippingAddressPage/EditShippingAddressPage"
				})
			},
			pay() {
				// console.log(1)
				setTimeout(() => {
					navigateBack()
				}, 3000)
				showToast({
					title: "付款"
				})
			},

			switchChange(e) {
				console.log("e", e)
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.Checkout {
		padding-top: 26rpx;
		font-family: 'PingFang SC';
		font-weight: 400;
		letter-spacing: 0px;
		font-size: 28rpx;
		color: #000000;

		// 修改外部组件备注框的样式
		::v-deep .u-textarea {
			width: 690rpx;
			height: 200rpx;
			border-radius: 16rpx;
			border-width: 1rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
		}

		.AddShippingAddress {
			margin: 0 auto;
			width: 690rpx;
			height: 100rpx;
			border-radius: 60rpx;
			background: #0F4C97;
			font-size: 34rpx;
			line-height: 100rpx;
			color: #FFFFFF;
			text-align: center;

		}

		.bigBox {
			margin-top: 24rpx;
			background-color: #f5f5f5;
			padding-bottom: 128rpx;

			.item {
				margin-top: 20rpx;
				padding: 30rpx;
				background: #FFFFFF;
			}

			.one {
				width: 750rpx;

				.goodImg {
					width: 180rpx;
					height: 180rpx;
					border-radius: 8rpx;
				}

				.one_detail {
					margin-left: 20rpx;
					flex: 1;

					.od_one {
						font-weight: 500;

						.odo_left {
							font-size: 34rpx;
						}

						.odo_right {
							font-size: 28rpx
						}

					}

					.od_two {
						margin-top: 16rpx;

						.odt_left {
							font-size: 24rpx;
							color: #00000059;
						}

						.odt_right {
							font-size: 28rpx;
						}
					}

				}
			}

			.two {
				width: 750rpx;

				// 这个类下的公共样式
				.blackCommon {
					font-size: 26rpx;

				}

				.yellowCommon {
					font-weight: 500;
					font-size: 26rpx;
					color: #FF571A;

				}

				.tItem {
					margin-top: 32rpx;
				}

				.t_one {
					margin-top: 0;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;

				}

				.t_five {
					justify-content: flex-end;
					font-weight: 500;
					font-size: 26rpx;

					text {
						font-size: 28rpx;
						color: #FF571A;
					}


				}


			}

			.three {
				width: 750rpx;

				.OrderRemarks {
					font-weight: 500;
					font-size: 28rpx;
				}

			}

			.four {
				.switch {
					width: 102rpx;
					height: 62rpx;
				}

				.four_left {

					.fl_top {}

					.fl_bottom {
						font-size: 24rpx;
						color: #00000059;
						margin-top: 4rpx;

					}
				}
			}

			.five {
				font-size: 24rpx;
				color: #979797;
				margin-bottom: 58rpx;
				background-color: #f5f5f5;

			}

			.totalPrice {
				position: fixed;
				bottom: 0;
				width: 750rpx;
				height: 128rpx;
				background: #FFFFFF;
				align-items: center;
				padding: 30rpx;

				.tp_left {}

				.tp_right {
					width: 200rpx;
					height: 88rpx;
					border-radius: 8rpx;
					background: #0F4C97;
					line-height: 88rpx;
					text-align: center;
					font-size: 34rpx;
					color: #FFFFFF;
				}

			}
		}
	}
</style>